import { useEffect } from "react";
import {
    Card,
    Breadcrumb,
} from "antd";
import { Link } from "react-router-dom";
import styles from "./index.module.scss";
import { useDispatch } from "react-redux";
import { getArticles } from "@/store/actions/article";
// 引入默认图片
import ArticleForm from "./ArticleForm";
import ArticleTable from "./ArticleTable";
const Article = () => {
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getArticles())
    }, [dispatch]);
    // 参数
    const params = {}
    // 表单提交事件
    const onFinish = values => {
        // 先让页码回到第一页再进行筛选条件
        params.page = 1
        params.status = values.status
        params.channel_id = values.channel_id
        if (values.dateArr && values.dateArr.length) {
            params.begin_pubdate = values.dateArr[0].format(
                "YYYY-MM-DD HH:mm:ss"
            );
            params.end_pubdate = values.dateArr[1].format(
                "YYYY-MM-DD HH:mm:ss"
            );
        }
        dispatch(getArticles(params))
    }
    // 改变分页和size重新查询
    const onPageChange = (page, pageSize) => {
        params.page = page
        params.per_page = pageSize
        dispatch(getArticles(params));
    }
    // 刷新文章列表
    const onRefresh = () => {
        dispatch(getArticles(params))
    }
    return (
        <div className={styles.root}>
            <Card
                title={
                    // 面包屑
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>内容管理</Breadcrumb.Item>
                    </Breadcrumb>
                }
            >
                {/* 表单 */}
                <ArticleForm onFinish={onFinish} />
            </Card>
            <ArticleTable onPageChange={onPageChange} onRefresh={onRefresh}/>
        </div>
    );
};

export default Article;